<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到呼和浩特市城乡执法信息系统首页</title>
    <link th:href="@{/assets/css/amazeui.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/core.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/menu.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/index.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/admin.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/page/typography.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/page/form.css}"rel="stylesheet"type="text/css">
    <link th:href="@{/assets/css/component.css}"rel="stylesheet"type="text/css">
</head>
<body>
<div class="videoContainer">
    <video id="videoPlayer" ontimeupdate="progressUpdate()" src="/assets/media/air.mp4" controls autoplay style="display :block;height:300px;weight:200px;margin: 0 auto">请升级浏览器</video>
</div>
<div class="barContainer">
    <div id="durationBar">
        <div id="positionBar"><span id="displayStatus">进度条</span></div>
    </div>
</div>
<div class="btn">
    <button onclick="play()">播放</button>
    <button onclick="pause()">暂停</button>
    <button onclick="stop()">停止</button>
    <button onclick="speedUp()">加速播放</button>
    <button onclick="slowdown()">减速播放</button>
    <button onclick="normalSpeed()">正常速度</button>
</div>

<div class="am-u-sm-12">
    <form class="from">
        <fieldset>
            <table class="am-table am-table-striped am-table-hover table-main">
                <thead>
                <tr>
                    <th class="table-id">执法人员</th>
                    <th class="table-title">执法人员分数</th>
                </tr>
                </thead>
                <tbody th:each="workers:${workers}">

                <tr>
                    <td th:text="${workers.wname}"></td>
                    <td th:text="${workers.wscore}"></td>

                </tr>
                </tbody>
            </table>
        </fieldset>
    </form>
</div>
</body>
</html>
<script>
    var video;
    var display;
    window.onload=function () {
        video=document.getElementById("videoPlayer");
        display=document.getElementById("displayStatus");
    }
    function play() {
        video.play();
    }
    function pause() {
        video.pause();
    }
    function stop() {
        video.pause();
        video.currentTime=0;
    }
    function speedUp() {
        video.play();
        video.playbackRate=2;
    }
    function slowDown() {
        video.play();
        video.playbackRate=0.5;
    }
    function normalSpeed() {
        video.play();
        video.playbackRate=1;
    }
    function progressUpdate() {
        var positionBar=document.getElementById("positionBar");
        positionBar.style.width=(video.currentTime/video.duration*100)+"%";
        displayStatus.innerHTML=(Math.round(video.currentTime*100)/100)+"秒";
    }
</script>